<template>
<div class="sign-mod-EchartItem3">
    <div class="echart-sign-mod" :class='tempData.dataKey'>
        图表组件-3
    </div>
</div>
</template>

<script>
//import echarts from 'echarts'

export default {
    name: 'EchartItem3',
    // 初始化函数
    mounted () {
        //初始化
        this.getData();
    },
    props: {
        // 列表数据
        tempData: {
            type: Object,
            default : function () {
                return {
                    queryUrl: '',
                    saveUrl: ''
                };
            }
        },
        // 模板id
        templateId: {
            type: String,
            default : function () {
                return '';
            }
        },
        // 内容id
        briefingDetailId: {
            type: String,
            default : function () {
                return '';
            }
        }
    },
    data () {
        return {
            echartObjEdit: null,
            echartObjPrev: null
        }
    },
    methods: {
        // 供子级调用(点击子级的按钮更新数据)-更新子数据
        updateSignTempData(tempData) {
            this.$emit('updateSignTempData', tempData);
            console.log('updateSignTempData:');
            console.log(tempData);
        },
        // 供父级调用(点击父级的保存按钮 tempData.isSaveInChild 为true时调用)-调用子级的保存函数
        saveSignTempForChild() {
            this.echartObjEdit && this.echartObjEdit.resize();
            console.log('saveSignTempForChild:');
            console.log(this.tempData);
        },
        // 初始化数据
        async getData() {
            this.loadedText = '数据加载中...';
            this.initEchartObj();
            let res = await C.request.post(C.Api('queryEchartList03'), {
                aa: 11
            });
            if (res.flag === C.Flag.SUCCESS) {
                this.initEchart(this.echartObjEdit, res.data);
                this.initEchart(this.echartObjPrev, res.data);
            } else {
                this.loadedText = '请求失败，请重试';
            }
        },

        // 初始化图表对象
        initEchartObj () {
            let className1 = '.visual-mod-edit-temp .echart-sign-mod.' + this.tempData.dataKey;
            let className2 = '.visual-mod-prev .echart-sign-mod.' + this.tempData.dataKey;

            if(!this.echartObjEdit && document.querySelector(className1)) {
                this.echartObjEdit = echarts.init(document.querySelector(className1));
            }
            if(!this.echartObjPrev && document.querySelector(className2)) {
                this.echartObjPrev = echarts.init(document.querySelector(className2));
            }
        },
        // 初始化图表
        initEchart (echartObj, obj) {
            let option = {
                xAxis: {
                    type: 'category',
                    data: obj.xList
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: obj.yList,
                    type: 'line',
                    smooth: true
                }]
            };

            // 使用刚指定的配置项和数据显示图表
            echartObj && echartObj.setOption(option);
            echartObj && echartObj.resize();
        }
    },
    watch: {
        tempData () {
            this.getData();
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.sign-mod-EchartItem3, .echart-sign-mod{ height: 100%; }
</style>
